<template>
  <div class="app-container">
    <!--搜索条件层-->
    <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="70px">

      <el-form-item label="字典名称">
        <el-input v-model="queryParams.dictName" placeholder="支持模糊查询" />
      </el-form-item>

      <el-form-item label="字典类型">
        <el-input v-model="queryParams.dictType" placeholder="支持模糊查询" />
      </el-form-item>

      <el-form-item label="状态">
        <el-select v-model="queryParams.status" clearable placeholder="请选择">
          <el-option
            v-for="item in dictList"
            :key="item.dictCode"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>

    </el-form>

    <!-- 操作按钮层 -->
    <el-row :gutter="10" class="mb8">

      <el-col :span="1.5">
        <el-button
          v-hasPermi="['system:dict:add']"
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </el-col>

      <el-col :span="1.5">
        <el-button
          v-hasPermi="['system:dict:edit']"
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
        >修改</el-button>
      </el-col>

      <el-col :span="1.5">
        <el-button
          v-hasPermi="['system:dict:remove']"
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
        >删除</el-button>
      </el-col>

    </el-row>

    <!-- 分页表格 -->
    <el-table v-loading="loading" :data="tableInfo.rows" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column prop="dictId" label="字典编号" width="80" />
      <el-table-column prop="dictName" label="字典名称" />
      <el-table-column label="字典类型">
        <template slot-scope="scope">
          <router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type">
            <span>{{ scope.row.dictType }}</span>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === '0'">正常</el-tag>
          <el-tag v-else type="danger">停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" :show-overflow-tooltip="true" />
      <el-table-column prop="createTime" label="创建时间" width="180" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-hasPermi="['system:dict:edit']" size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button v-hasPermi="['system:dict:remove']" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!-- 自定义分页条 -->
    <pagination
      v-show="tableInfo.total>0"
      :total="tableInfo.total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="fetchDictType"
    />

    <!-- 新增或修改对话框-->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="editForm" :rules="rules" :model="editForm" label-width="80px">

        <el-form-item label="字典名称" prop="dictName">
          <el-input v-model="editForm.dictName" placeholder="请输入字典名称" />
        </el-form-item>

        <el-form-item label="字典类型" prop="dictType">
          <el-input v-model="editForm.dictType" placeholder="请输入字典类型" />
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="editForm.status">
            <el-radio v-for="item in dictList" :key="item.dictCode" :label="item.dictValue">{{ item.dictLabel }}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input v-model="editForm.remark" type="textarea" :rows="2" placeholder="请输入内容" />
        </el-form-item>
      </el-form>

      <!-- 保存按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getDicts } from '@/api/system/dict/data.js'
import { listType, addType, updateType, getType, delType } from '@/api/system/dict/type.js'

export default {
  name: 'Dict',
  // vue的规范,该组件的私有的变量
  data() {
    // 返回一个对象
    return {
      // 表单查询绑定的值
      queryParams: {
        dictName: undefined,
        dictType: undefined,
        status: undefined,
        pageNum: 1,
        pageSize: 10
      },
      // 状态列表
      dictList: [],
      // 不要显示加载动画
      loading: false,
      // 分页返回查询数据
      tableInfo: {
        total: 0,
        rows: []
      },
      // 编辑对话框的标题
      title: '标题',
      // 是否显示对话框
      open: false,
      // 双向绑定收集新增修改表单的值
      editForm: {
        dictId: undefined,
        dictName: undefined,
        dictType: undefined,
        status: undefined,
        remark: undefined
      },
      // 表格选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 验证规则
      rules: {
        dictName: [
          { required: true, message: '该值不能为空', trigger: 'blur' }
        ],
        dictType: [
          { required: true, message: '该值不能为空', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '该值不能为空', trigger: 'blur' }
        ]
      }
      // return结束
    }
  },
  // 当页面加载完成时，初始化一些操作
  created() {
    this.fetchDictData()
    // 加载分页数据
    this.fetchDictType()
  },
  // 向vue中注册方法
  methods: {
    // 查询sys_dict_data的数据
    fetchDictData() {
      // 调用ajax远程操作
      getDicts('sys_normal_disable').then(resp => {
        this.dictList = resp.data
      })
    },
    // 查询 sys_dict_type表的分页操作
    fetchDictType() {
      // 开启加载动画
      this.loading = true
      listType(this.queryParams).then(resp => {
        this.tableInfo.total = resp.total
        this.tableInfo.rows = resp.rows
        // 关闭动画
        this.loading = false
      }).catch(e => {
        // 关闭动画
        this.loading = false
      })
    },
    // 重置查询按钮方法
    resetQuery() {
      // 查询条件重新赋值
      this.queryParams.dictName = undefined
      this.queryParams.dictType = undefined
      this.queryParams.status = undefined
    },
    // 点击搜索按钮事件
    handleQuery() {
      // 回到第一页
      this.queryParams.pageNum = 1
      // 读取数据
      this.fetchDictType()
    },
    // 保存数据按钮
    submitForm() {
      // 调用表单的验证方法
      this.$refs['editForm'].validate(valid => {
        // 验证通过
        if (valid) {
          // 修改
          if (this.editForm.dictId != undefined) {
            this.editData()
          } else {
            // 新增
            this.addData()
          }
        }
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
    },
    // 新增按钮方法
    handleAdd() {
      // 加载内容
      this.open = true
      this.title = '添加字典类型'
      // 才能清空样式
      this.resetForm()
    },
    resetForm() {
      // 另一种比较好的解决方案，vue 推荐的 延迟到下一次操作
      // 在下次 DOM 更新循环结束之后执行延迟回调。
      // 在修改数据之后立即使用这个方法，获取更新后的 DOM。
      this.$nextTick(() => {
        if (this.$refs['editForm']) {
          this.$refs['editForm'].resetFields()
        }
      })

      // 清空值
      this.editForm = {
        dictId: undefined,
        dictName: undefined,
        dictType: undefined,
        status: undefined,
        remark: undefined
      }
    },
    // ajax新增操作
    addData() {
      addType(this.editForm).then(resp => {
        // 关闭对话框
        this.open = false
        // 重新查询数据(要不要回第一页，你自己说了算)
        this.fetchDictType()
      })
    },
    // ajax保存操作
    editData() {
      updateType(this.editForm).then(resp => {
        // 关闭对话框
        this.open = false
        // 重新查询数据(要不要回第一页，你自己说了算)
        this.fetchDictType()
      })
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.resetForm()
      const dictId = row.dictId || this.ids
      getType(dictId).then(response => {
        this.editForm = response.data
        this.open = true
        this.title = '修改字典类型'
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const dictIds = row.dictId || this.ids
      this.$confirm('是否确认删除字典编号为"' + dictIds + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return delType(dictIds)
      }).then(() => {
        this.handleQuery()
        this.msgSuccess('删除成功')
      })
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.dictId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    }
    // methods结束
  }

}
</script>
